<template>
	<view class="cc-number-wrap" :style="[buildStyleParam]">
		<view class="number-btn btn-minus" :style="[minusWrapStyle]" @click.stop="handelMinus">
			<text class="iconfont btn__icon--minus">&#xe627;</text>
		</view>
		<view class="number">
			<view class="number-value">{{innerValue}}</view>
		</view>
		<view class="number-btn btn-plus" :style="[plusWrapStyle]" @click.stop="handelPlus">
			<text class="iconfont btn__icon--plus">&#xe628;</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cc-number",
		emits: ['update:modelValue', 'change'],
		props: {
			modelValue: {
				type: Number,
				default: 0
			},
			// 形状：square（方形）或 circle（圆形）
			shape: {
				type: String,
				default: 'circle',
				validator: (val) => ['square', 'circle'].includes(val)
			},
			disabled: {
				type: Boolean,
				default: false
			},
			size: {
				type: Number,
				default: 45
			},
			plusPrimary: {
				type: Object,
				default: () => {
					return {
						borderColor: '#000',
						backgroundColor: '#000',
						iconColor: '#fff',
						iconSize: 25,
					}
				}
			},
			minusPrimary: {
				type: Object,
				default: () => {
					return {
						borderColor: '#000',
						backgroundColor: '#fff',
						iconColor: '#000',
						iconSize: 25,
					}
				}
			},
			fontColor: {
				type: String,
				default: '#000'
			},
		},
		computed: {
			buildStyleParam() {
				return {
					'--fontColor': this.fontColor,
					'--size': this.size + 'rpx',
					'--borderRadius': this.shape == 'square' ? '20%' : '50%',
				}
			},
			plusWrapStyle() {
				let style = {
					border: `2rpx solid ` + this.plusPrimary.borderColor,
					background: this.plusPrimary.backgroundColor,
					fontSize: `${this.plusPrimary.iconSize}rpx`,
					color: this.plusPrimary.iconColor,
				}
				return style
			},
			minusWrapStyle() {
				let style = {
					border: `2rpx solid ` + this.minusPrimary.borderColor,
					background: this.minusPrimary.backgroundColor,
					fontSize: `${this.minusPrimary.iconSize}rpx`,
					color: this.minusPrimary.iconColor,
				}
				return style
			},

		},
		data() {
			return {
				innerValue: this.modelValue
			};
		},
		methods: {
			handelPlus() {
				this.$emit('change', values)
				this.$emit('update:modelValue', values)
			},
			handelMinus() {
				this.$refs.dialogRef.show();
				this.$emit('change', values)
				this.$emit('update:modelValue', values)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/cc-ui-tools/scss/theme.scss";
	@import "@/cc-ui-tools/scss/animation.scss";

	.cc-number-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.number-btn {
			box-sizing: border-box;
			width: var(--size);
			height: var(--size);
			border-radius: var(--borderRadius);

			display: flex;
			align-items: center;
			justify-content: center;
			//transition: 0.3s all;

			&:active {
				transform: scale(0.9);
			}

			&.btn-minus {
				.btn__icon--minus {
					font-size: inherit;
				}
			}

			&.btn-plus {
				.btn__icon--plus {
					font-size: inherit;
				}
			}
		}

		.number {
			margin: 0 5rpx;

			.number-value {
				width: 50rpx;
				text-align: center;
				font-size: inherit;
				color: var(--fontColor);
			}
		}
	}
</style>